<!DOCTYPE HTML>
<html lang="zh-CN">

<head>
    <!--Setting-->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta http-equiv="Cache-Control" content="no-siteapp">
    <meta http-equiv="Cache-Control" content="no-transform">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta name="apple-mobile-web-app-capable" content="涛哥的博客">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no,email=no,adress=no">
    <meta name="browsermode" content="application">
    <meta name="screen-orientation" content="portrait">
    <meta name="theme-version" content="1.2.3">
    <meta name="root" content="/">
    <link rel="dns-prefetch" href="https://jaredtao.github.io">
    <!--SEO-->

<meta name="keywords" content="Qt,Qml,QtQuick,组件化编程" />


<meta name="description" content="
简介
先看预览图
新的渐变效果
条形进度条
圆形进度条

简介本文是《玩转Qml》系列文章的第六篇，涛哥将教大家，进度条组件的定制。
源码《玩转Qml》系列文章，配套了一个优秀的开源项目:Ta..." />


<meta name="robots" content="all" />
<meta name="google" content="all" />
<meta name="googlebot" content="all" />
<meta name="verify" content="all" />
    <!--Title-->

<title>
    
    玩转Qml(6)-进度条定制 |
    
    涛哥的博客
</title>

<link rel="alternate" href="/atom.xml" title="涛哥的博客" type="application/atom+xml">


<link rel="icon" href="/favicon.ico">

    


<link rel="stylesheet" href="/css/bootstrap.min.css?rev=3.3.7.css">
<link rel="stylesheet" href="/css/font-awesome.min.css?rev=4.7.0.css">
<link rel="stylesheet" href="/css/style.css?rev=@@hash.css">

    
<div class="hide">
    <script type="text/javascript">
    var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");
    document.write(unescape("%3Cspan class='cnzz_stat_icon_1263868967 hide' %3E%3Cscript%20src%3D%22https%3A%2F%2Fs95.cnzz.com%2Fz_stat.php%3Fweb_id%3D1272564536%22%3E%3C%2Fscript%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s19.cnzz.com/z_stat.php%3Fid%3D1263868967%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));
    </script>
</div>




    

<script>
(function() {
    var bp = document.createElement('script');
    var curProtocol = window.location.protocol.split(':')[0];
    if (curProtocol === 'https') {
        bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
    } else {
        bp.src = 'http://push.zhanzhang.baidu.com/push.js';
    }
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(bp, s);
})();
</script>

<meta name="generator" content="Hexo 4.2.1"></head>
<!--[if lte IE 8]>
<style>
    html{ font-size: 1em }
</style>
<![endif]-->
<!--[if lte IE 9]>
<div style="ie">你使用的浏览器版本过低，为了你更好的阅读体验，请更新浏览器的版本或者使用其他现代浏览器，比如Chrome、Firefox、Safari等。</div>
<![endif]-->
<body>
    <header class="main-header"  style="background-image:url(
    http://snippet.shenliyang.com/img/banner.jpg)"
     >
    <div class="main-header-box">
        <a class="header-avatar" href="/" title='JaredTao'>
            <img src="/img/avatar.jpg" alt="logo头像" class="img-responsive center-block">
        </a>
        <div class="branding">
            <!--<h2 class="text-hide">Snippet主题,从未如此简单有趣</h2>-->
            
            <h2>
                单枪匹马亦对饮，历经磨难记初心
            </h2>
            
        </div>
    </div>
</header>
    <nav class="main-navigation">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="navbar-header"><span class="nav-toggle-button collapsed pull-right" data-toggle="collapse" data-target="#main-menu" id="mnav">
                        <span class="sr-only"></span>
                        <i class="fa fa-bars"></i>
                    </span>
                    <a class="navbar-brand" href="https://jaredtao.github.io">
                        涛哥的博客</a>
                </div>
                <div class="collapse navbar-collapse" id="main-menu">
                    <ul class="menu">
                        
                        <li role="presentation" class="text-center">
                            <a href="/"><i class="fa "></i>
                                首页</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qt/"><i class="fa "></i>
                                玩转Qt</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转Qml/"><i class="fa "></i>
                                玩转Qml</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/玩转QtQuick/"><i class="fa "></i>
                                玩转QtQuick</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/categories/涛哥的博客/"><i class="fa "></i>
                                涛哥的博客</a>
                        </li>
                        
                        <li role="presentation" class="text-center">
                            <a href="/archives/"><i class="fa "></i>
                                时间轴</a>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
    </div>
</nav>
    <section class="content-wrap">
        <div class="container">
            <div class="row">
                <main class="col-md-8 main-content m-post">
                    <p id="process"></p>
<article class="post">
    <div class="post-head">
        <h1 id="玩转Qml(6)-进度条定制">
            
            玩转Qml(6)-进度条定制
            
        </h1>
        <div class="post-meta">
    
    <span class="categories-meta fa-wrap">
        <i class="fa fa-folder-open-o"></i>
        <a class="category-link" href="/categories/%E7%8E%A9%E8%BD%ACQml/">玩转Qml</a>
    </span>
    
    
    <span class="fa-wrap">
        <i class="fa fa-tags"></i>
        <span class="tags-meta">
            
            <a class="tag-link" href="/tags/Qml/" rel="tag">Qml</a> <a class="tag-link" href="/tags/Qt/" rel="tag">Qt</a> <a class="tag-link" href="/tags/QtQuick/" rel="tag">QtQuick</a> <a class="tag-link" href="/tags/%E7%BB%84%E4%BB%B6%E5%8C%96%E7%BC%96%E7%A8%8B/" rel="tag">组件化编程</a>
            
        </span>
    </span>
    
    
    
    <span class="fa-wrap">
        <i class="fa fa-clock-o"></i>
        <span class="date-meta">
            2019/05/18</span>
    </span>
    
    <span class="fa-wrap">
        <i class="fa fa-eye"></i>
        <span id="busuanzi_value_page_pv"></span>
    </span>
    
    
</div>
        
        
        <p class="fa fa-exclamation-triangle warning">
            本文于<strong>
                1053</strong>
            天之前发表，文中内容可能已经过时。
        </p>
        
    </div>
    
<div id="post-gallery">
    
    <img src="/images/Qml6/ProgressBar.gif" alt="gallery-img" class="gallery">
    
</div>

    <div class="post-body post-content">
        <ul>
<li><a href="#%E7%AE%80%E4%BB%8B">简介</a></li>
<li><a href="#%E5%85%88%E7%9C%8B%E9%A2%84%E8%A7%88%E5%9B%BE">先看预览图</a></li>
<li><a href="#%E6%96%B0%E7%9A%84%E6%B8%90%E5%8F%98%E6%95%88%E6%9E%9C">新的渐变效果</a></li>
<li><a href="#%E6%9D%A1%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1">条形进度条</a></li>
<li><a href="#%E5%9C%86%E5%BD%A2%E8%BF%9B%E5%BA%A6%E6%9D%A1">圆形进度条</a></li>
</ul>
<h2 id="简介"><a href="#简介" class="headerlink" title="简介"></a>简介</h2><p>本文是《玩转Qml》系列文章的第六篇，涛哥将教大家，进度条组件的定制。</p>
<h2 id="源码"><a href="#源码" class="headerlink" title="源码"></a>源码</h2><p>《玩转Qml》系列文章，配套了一个优秀的开源项目:TaoQuick</p>
<p>github <a href="https://github.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://github.com/jaredtao/TaoQuick</a></p>
<p>访问不了或者速度太慢，可以用国内的镜像网站gitee</p>
<p><a href="https://gitee.com/jaredtao/TaoQuick" target="_blank" rel="noopener">https://gitee.com/jaredtao/TaoQuick</a></p>
<h2 id="先看预览图"><a href="#先看预览图" class="headerlink" title="先看预览图"></a>先看预览图</h2><p><img src="/images/Qml6/ProgressBar.gif" alt="预览"></p>
<h2 id="新的渐变效果"><a href="#新的渐变效果" class="headerlink" title="新的渐变效果"></a>新的渐变效果</h2><p>Qt 5.12 加入了新的渐变效果，一共180种，效果来自这个网站<a href="https://webgradients.com" target="_blank" rel="noopener">https://webgradients.com</a></p>
<p>按照帮助文档的介绍，可以通过下面这两种方式使用</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">y</span>: <span class="number">0</span>; <span class="attribute">width</span>: <span class="number">80</span>; <span class="attribute">height</span>: <span class="number">80</span></span><br><span class="line">    <span class="attribute">gradient</span>: Gradient.NightFade</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">y</span>: <span class="number">0</span>; <span class="attribute">width</span>: <span class="number">80</span>; <span class="attribute">height</span>: <span class="number">80</span></span><br><span class="line">    <span class="attribute">gradient</span>: <span class="string">"NightFade"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>涛哥立即想到了，枚举不就是数字嘛</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">y</span>: <span class="number">0</span>; <span class="attribute">width</span>: <span class="number">80</span>; <span class="attribute">height</span>: <span class="number">80</span></span><br><span class="line">    <span class="attribute">gradient</span>: <span class="number">1</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">y</span>: <span class="number">0</span>; <span class="attribute">width</span>: <span class="number">80</span>; <span class="attribute">height</span>: <span class="number">80</span></span><br><span class="line">    <span class="attribute">gradient</span>: <span class="number">2</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">y</span>: <span class="number">0</span>; <span class="attribute">width</span>: <span class="number">80</span>; <span class="attribute">height</span>: <span class="number">80</span></span><br><span class="line">    <span class="attribute">gradient</span>: <span class="number">3</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>试了一下，这样也是可以啊，哈哈。</p>
<p>于是涛哥就把180种渐变效果都拉出来看看。</p>
<p><img src="/images/Qml6/Gradiant.gif" alt="预览"></p>
<p>Qt只支持水平和垂直的渐变，其中有小部分是不能用的，所以只有165个能用。</p>
<p>看一下展示全部渐变的Qml代码：</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.9</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.5</span></span><br><span class="line"></span><br><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line"></span><br><span class="line">    <span class="title">GridView</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> g</span></span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">anchors.margins</span>: <span class="number">20</span></span><br><span class="line">        <span class="attribute">cellWidth</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">cellHeight</span>: <span class="number">160</span></span><br><span class="line">        <span class="attribute">model</span>: <span class="number">180</span>          <span class="comment">//这里的数据Model直接给个数字180</span></span><br><span class="line">        <span class="attribute">clip</span>: <span class="literal">true</span></span><br><span class="line">        <span class="keyword">property</span><span class="string"> var invalidList</span>: [<span class="number">27</span>, <span class="number">39</span>, <span class="number">40</span>, <span class="number">45</span>, <span class="number">71</span>, <span class="number">74</span>, <span class="number">105</span>, <span class="number">111</span>, <span class="number">119</span>, <span class="number">130</span>, <span class="number">135</span>, <span class="number">141</span>]    <span class="comment">//这几个是不能用的，看过运行报错后手动列出来的。</span></span><br><span class="line">        <span class="attribute">delegate</span>: <span class="title">Item</span>&#123;</span><br><span class="line">            <span class="attribute">width</span>: <span class="number">160</span></span><br><span class="line">            <span class="attribute">height</span>: <span class="number">160</span></span><br><span class="line">            <span class="title">Rectangle</span>&#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">150</span></span><br><span class="line">                <span class="attribute">height</span>: <span class="number">150</span></span><br><span class="line">                <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">                <span class="attribute">color</span>: <span class="string">"white"</span></span><br><span class="line">                <span class="attribute">radius</span>: <span class="number">10</span></span><br><span class="line">                <span class="title">Text</span> &#123;</span><br><span class="line">                    <span class="attribute">anchors.horizontalCenter</span>: <span class="built_in">parent</span>.horizontalCenter</span><br><span class="line">                    <span class="attribute">anchors.top</span>: <span class="built_in">parent</span>.top</span><br><span class="line">                    <span class="attribute">anchors.topMargin</span>: <span class="number">2</span></span><br><span class="line">                    <span class="attribute">text</span>: index + <span class="number">1</span></span><br><span class="line">                &#125;</span><br><span class="line">                <span class="title">Rectangle</span> &#123;</span><br><span class="line">                    <span class="attribute">width</span>: <span class="number">100</span></span><br><span class="line">                    <span class="attribute">height</span>: width</span><br><span class="line">                    <span class="attribute">radius</span>:  width / <span class="number">2</span></span><br><span class="line">                    <span class="comment">//编号在列表里的，直接渐变赋值为null，就不会在Qml运行时报警告了</span></span><br><span class="line">                    <span class="attribute">gradient</span>: g.invalidList.indexOf(modelData + <span class="number">1</span>) &lt; <span class="number">0</span> ? modelData + <span class="number">1</span> : <span class="literal">null</span></span><br><span class="line">                    <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">                    <span class="attribute">anchors.verticalCenterOffset</span>: <span class="number">10</span></span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="条形进度条"><a href="#条形进度条" class="headerlink" title="条形进度条"></a>条形进度条</h2><p>普通进度条的原理，就是有一个比较长的矩形做背景，在上面放一个颜色不同的矩形，其宽度跟着百分比变化,</p>
<p>100%时宽度与背景一致。</p>
<p>可以写一个很简要的进度条。</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> back</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">300</span></span><br><span class="line">    <span class="attribute">height</span>: <span class="number">50</span></span><br><span class="line">    <span class="attribute">radius</span>: height / <span class="number">2</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="string">"white"</span>  </span><br><span class="line">    <span class="keyword">property</span><span class="string"> int percent</span>: <span class="number">0</span></span><br><span class="line">    <span class="title">Rectangle</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> front</span></span><br><span class="line">        <span class="comment">//宽度是 背景宽度 * 百分比</span></span><br><span class="line">        <span class="attribute">width</span>: percent / <span class="number">100</span> * <span class="built_in">parent</span>.width  </span><br><span class="line">        <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">        <span class="attribute">radius</span>: <span class="built_in">parent</span>.radius</span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"red"</span></span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>再添加一点元素，在右侧放一个文本，表示百分比，或者放图片。甚至给进度条加个闪光特效。</p>
<p>经过一系列的加工，封装成一个综合的组件，最终结果如下：</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//NormalProgressBar.qml</span></span><br><span class="line"></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.12</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.12</span></span><br><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> r</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> int percent</span>: <span class="number">0</span></span><br><span class="line">    <span class="attribute">implicitWidth</span>: <span class="number">200</span></span><br><span class="line">    <span class="attribute">implicitHeight</span>: <span class="number">16</span></span><br><span class="line">    <span class="comment">//枚举， 表示右侧Bar的类型</span></span><br><span class="line">    enum <span class="title">BarType</span> &#123;  </span><br><span class="line">        Text,               <span class="comment">//右侧放文本</span></span><br><span class="line">        SucceedOrFailed,    <span class="comment">//右侧放图片表示成功和失败，没有100%就是失败</span></span><br><span class="line">        NoBar               <span class="comment">//右侧不放东西</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//只读属性，内置一些颜色</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __backColor</span>: <span class="string">"#f5f5f5"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __blueColor</span>: <span class="string">"#1890ff"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __succeedColor</span>: <span class="string">"#52c41a"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __failedColor</span>: <span class="string">"#f5222d"</span></span><br><span class="line"></span><br><span class="line">    <span class="comment">//背景色，默认值</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> color backgroundColor</span>: __backColor</span><br><span class="line">    <span class="comment">//前景色</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> color frontColor</span>: &#123;</span><br><span class="line">        <span class="keyword">switch</span> (barType) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="attribute">TNormalProgress.BarType.SucceedOrFailed</span>:</span><br><span class="line">            <span class="keyword">return</span> percent === <span class="number">100</span> ? <span class="attribute">__succeedColor</span> : __failedColor</span><br><span class="line">        <span class="attribute">default</span>:</span><br><span class="line">            <span class="keyword">return</span> __blueColor</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="comment">//文字</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> string text</span>: <span class="built_in">String</span>(<span class="string">"%1%"</span>).arg(percent)</span><br><span class="line">    <span class="comment">//渐变 0-180 除掉不能用的，165种渐变任你选</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> int gradientIndex</span>: <span class="number">-1</span></span><br><span class="line">    <span class="comment">//闪烁特效</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> bool flicker</span>: <span class="literal">false</span></span><br><span class="line">    <span class="comment">//右侧Bar类型</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> var barType</span>: TNormalProgress.BarType.Text</span><br><span class="line">    <span class="title">Text</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> t</span></span><br><span class="line">        <span class="attribute">enabled</span>: barType === TNormalProgress.BarType.Text</span><br><span class="line">        <span class="attribute">visible</span>: enabled</span><br><span class="line">        <span class="attribute">text</span>: r.text</span><br><span class="line">        <span class="attribute">anchors.verticalCenter</span>: <span class="built_in">parent</span>.verticalCenter</span><br><span class="line">        <span class="attribute">anchors.right</span>: <span class="built_in">parent</span>.right</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">Image</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> image</span></span><br><span class="line">        <span class="attribute">source</span>: percent === <span class="number">100</span> ? <span class="string">"qrc:/Core/Image/ProgressBar/ok_circle.png"</span> : <span class="string">"qrc:/Core/Image/ProgressBar/fail_circle.png"</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">        <span class="attribute">width</span>: height</span><br><span class="line">        <span class="attribute">enabled</span>: barType === TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">        <span class="attribute">visible</span>: enabled</span><br><span class="line">        <span class="attribute">anchors.right</span>: <span class="built_in">parent</span>.right</span><br><span class="line">    &#125;</span><br><span class="line"></span><br><span class="line">    <span class="keyword">property</span><span class="string"> var __right</span>: &#123;</span><br><span class="line">        <span class="keyword">switch</span> (barType) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="attribute">TNormalProgress.BarType.Text</span>:</span><br><span class="line">            <span class="keyword">return</span> t.left</span><br><span class="line">        <span class="keyword">case</span> <span class="attribute">TNormalProgress.BarType.SucceedOrFailed</span>:</span><br><span class="line">            <span class="keyword">return</span> image.left</span><br><span class="line">        <span class="attribute">default</span>:</span><br><span class="line">            <span class="keyword">return</span> r.right</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">Rectangle</span> &#123;                             <span class="comment">//背景</span></span><br><span class="line">        <span class="attribute">id:</span><span class="string"> back</span></span><br><span class="line">        <span class="attribute">anchors.left</span>: <span class="built_in">parent</span>.left</span><br><span class="line">        <span class="attribute">anchors.right</span>: __right</span><br><span class="line">        <span class="attribute">anchors.rightMargin</span>: <span class="number">4</span></span><br><span class="line">        <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">        <span class="attribute">radius</span>: height / <span class="number">2</span></span><br><span class="line">        <span class="attribute">color</span>: backgroundColor</span><br><span class="line">        <span class="title">Rectangle</span> &#123;                         <span class="comment">//前景</span></span><br><span class="line">            <span class="attribute">id:</span><span class="string"> front</span></span><br><span class="line">            <span class="attribute">width</span>: percent / <span class="number">100</span> * <span class="built_in">parent</span>.width</span><br><span class="line">            <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">            <span class="attribute">radius</span>: <span class="built_in">parent</span>.radius</span><br><span class="line">            <span class="attribute">color</span>: frontColor</span><br><span class="line">            <span class="attribute">gradient</span>: gradientIndex === <span class="number">-1</span> ? <span class="attribute">null</span> : gradientIndex</span><br><span class="line">            <span class="title">Rectangle</span> &#123;                     <span class="comment">//前景上的闪光特效</span></span><br><span class="line">                <span class="attribute">id:</span><span class="string"> flick</span></span><br><span class="line">                <span class="attribute">height</span>: <span class="built_in">parent</span>.height</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">0</span></span><br><span class="line">                <span class="attribute">radius</span>: <span class="built_in">parent</span>.radius</span><br><span class="line">                <span class="attribute">color</span>: Qt.lighter(<span class="built_in">parent</span>.color, <span class="number">1.2</span>)</span><br><span class="line">                <span class="attribute">enabled</span>: flicker</span><br><span class="line">                <span class="attribute">visible</span>: enabled</span><br><span class="line">                NumberAnimation <span class="keyword">on</span> <span class="title">width</span> &#123;</span><br><span class="line">                    <span class="attribute">running</span>: visible</span><br><span class="line">                    <span class="attribute">from</span>: <span class="number">0</span></span><br><span class="line">                    <span class="attribute">to</span>: front.width</span><br><span class="line">                    <span class="attribute">duration</span>: <span class="number">1000</span></span><br><span class="line">                    <span class="attribute">loops</span>: Animation.Infinite;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="圆形进度条"><a href="#圆形进度条" class="headerlink" title="圆形进度条"></a>圆形进度条</h2><p>将一个Rectangle做成圆形: 宽高相等，半径为宽度一半。</p>
<p>再把 颜色设置为透明，边框不透明，边框加粗一点，就是一个圆环了。</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> back</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120</span></span><br><span class="line">    <span class="attribute">height</span>: width</span><br><span class="line">    <span class="attribute">radius</span>: width / <span class="number">2</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="string">"transparent"</span></span><br><span class="line">    <span class="attribute">border.width</span>: <span class="number">10</span></span><br><span class="line">    <span class="attribute">border.color</span>: <span class="string">"white"</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>接下来给圆环贴上一个圆形渐变色，渐变按照百分比来做。</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">import</span> QtGraphicalEffects <span class="number">1.12</span></span><br><span class="line"><span class="title">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> back</span></span><br><span class="line">    <span class="attribute">width</span>: <span class="number">120</span></span><br><span class="line">    <span class="attribute">height</span>: width</span><br><span class="line">    <span class="attribute">radius</span>: width / <span class="number">2</span></span><br><span class="line">    <span class="attribute">color</span>: <span class="string">"transparent"</span></span><br><span class="line">    <span class="attribute">border.width</span>: <span class="number">10</span></span><br><span class="line">    <span class="attribute">border.color</span>: <span class="string">"white"</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> int percent</span>: <span class="number">0</span></span><br><span class="line">    <span class="title">ConicalGradient</span> &#123;</span><br><span class="line">        <span class="attribute">anchors.fill</span>: back</span><br><span class="line">        <span class="attribute">source</span>: back</span><br><span class="line">        <span class="attribute">gradient</span>: <span class="title">Gradient</span> &#123;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: <span class="number">0.0</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> ; <span class="attribute">color</span>: <span class="string">"red"</span> &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> + <span class="number">0.001</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: <span class="number">1.0</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>渐变从0 到 percent处都是有渐变颜色的, 再从percent + 0.001 到1.0处，都是背景色，这样就是一个简易的圆形进度条了。</p>
<p>不过这里percent为100的情况，圆形渐变处理不了，我们可以特殊处理，直接让背景圆环变成前景色就行了。(既然都100%了，背景肯定是全部被遮住了，那就让背景做前景，藏掉真正的前景)</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">```<span class="selector-tag">qml</span></span><br><span class="line"><span class="selector-tag">import</span> <span class="selector-tag">QtGraphicalEffects</span> 1<span class="selector-class">.12</span></span><br><span class="line"><span class="selector-tag">Rectangle</span> &#123;</span><br><span class="line">    <span class="attribute">id</span>: back</span><br><span class="line">    width: <span class="number">120</span></span><br><span class="line">    height: width</span><br><span class="line">    radius: width / <span class="number">2</span></span><br><span class="line">    color: <span class="string">"transparent"</span></span><br><span class="line">    border.width: <span class="number">10</span></span><br><span class="line">    border.color: percent === <span class="number">100</span> ? <span class="string">"red"</span> : <span class="string">"white"</span>     //百分比为<span class="number">100</span>时显示为前景,否则显示为背景</span><br><span class="line">    property int percent: <span class="number">0</span></span><br><span class="line">    ConicalGradient &#123;</span><br><span class="line">        anchors.fill: back</span><br><span class="line">        source: back</span><br><span class="line">        enabled: percent != <span class="number">100</span>     //百分比不为<span class="number">100</span>时有效</span><br><span class="line">        visible: enabled            //百分比不为<span class="number">100</span>时有效</span><br><span class="line">        gradient: Gradient &#123;</span><br><span class="line">            GradientStop &#123; position: <span class="number">0.0</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">            <span class="selector-tag">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> ; <span class="attribute">color</span>: <span class="string">"red"</span> &#125;</span><br><span class="line">            <span class="selector-tag">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> + <span class="number">0.001</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">            <span class="selector-tag">GradientStop</span> &#123; <span class="attribute">position</span>: <span class="number">1.0</span>; <span class="attribute">color</span>: <span class="string">"white"</span> &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>再加点料,封装成组件</p>
<figure class="highlight qml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//CircleProgressBar.qml</span></span><br><span class="line"><span class="keyword">import</span> QtQuick <span class="number">2.12</span></span><br><span class="line"><span class="keyword">import</span> QtQuick.Controls <span class="number">2.12</span></span><br><span class="line"><span class="keyword">import</span> QtGraphicalEffects <span class="number">1.12</span></span><br><span class="line"><span class="title">Item</span> &#123;</span><br><span class="line">    <span class="attribute">id:</span><span class="string"> r</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> int percent</span>: <span class="number">0</span></span><br><span class="line"></span><br><span class="line">    enum <span class="title">BarType</span> &#123;</span><br><span class="line">        Text,</span><br><span class="line">        SucceedOrFailed,</span><br><span class="line">        NoBar</span><br><span class="line">    &#125;</span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __backColor</span>: <span class="string">"#f5f5f5"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __blueColor</span>: <span class="string">"#1890ff"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __succeedColor</span>: <span class="string">"#52c41a"</span></span><br><span class="line">    readonly <span class="keyword">property</span><span class="string"> color __failedColor</span>: <span class="string">"#f5222d"</span></span><br><span class="line">    <span class="keyword">property</span><span class="string"> color backgroundColor</span>: __backColor</span><br><span class="line">    <span class="keyword">property</span><span class="string"> color frontColor</span>: &#123;</span><br><span class="line">        <span class="keyword">switch</span> (barType) &#123;</span><br><span class="line">        <span class="keyword">case</span> <span class="attribute">TNormalProgress.BarType.SucceedOrFailed</span>:</span><br><span class="line">            <span class="keyword">return</span> percent === <span class="number">100</span> ? <span class="attribute">__succeedColor</span> : __failedColor</span><br><span class="line">        <span class="attribute">default</span>:</span><br><span class="line">            <span class="keyword">return</span> __blueColor</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="keyword">property</span><span class="string"> string text</span>: <span class="built_in">String</span>(<span class="string">"%1%"</span>).arg(percent)</span><br><span class="line">    <span class="keyword">property</span><span class="string"> var barType</span>: TNormalProgress.BarType.Text</span><br><span class="line">    <span class="title">Rectangle</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> back</span></span><br><span class="line">        <span class="attribute">color</span>: <span class="string">"transparent"</span></span><br><span class="line">        <span class="attribute">anchors.fill</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">border.color</span>: percent === <span class="number">100</span> ? <span class="attribute">frontColor</span> : backgroundColor</span><br><span class="line">        <span class="attribute">border.width</span>: <span class="number">10</span></span><br><span class="line">        <span class="attribute">radius</span>: width / <span class="number">2</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">Text</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> t</span></span><br><span class="line">        <span class="attribute">enabled</span>: barType === TNormalProgress.BarType.Text</span><br><span class="line">        <span class="attribute">visible</span>: enabled</span><br><span class="line">        <span class="attribute">text</span>: r.text</span><br><span class="line">        <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">        <span class="attribute">verticalAlignment</span>: Text.AlignVCenter</span><br><span class="line">        <span class="attribute">horizontalAlignment</span>: Text.AlignHCenter</span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">Image</span> &#123;</span><br><span class="line">        <span class="attribute">id:</span><span class="string"> image</span></span><br><span class="line">        <span class="attribute">source</span>: percent === <span class="number">100</span> ? <span class="string">"qrc:/Core/Image/ProgressBar/ok.png"</span> : <span class="string">"qrc:/Core/Image/ProgressBar/fail.png"</span></span><br><span class="line">        <span class="attribute">enabled</span>: barType === TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">        <span class="attribute">visible</span>: enabled</span><br><span class="line">        <span class="attribute">scale</span>: <span class="number">2</span></span><br><span class="line">        <span class="attribute">anchors.centerIn</span>: <span class="built_in">parent</span></span><br><span class="line">    &#125;</span><br><span class="line">    <span class="title">ConicalGradient</span> &#123;</span><br><span class="line">        <span class="attribute">anchors.fill</span>: back</span><br><span class="line">        <span class="attribute">source</span>: back</span><br><span class="line">        <span class="attribute">enabled</span>: percent != <span class="number">100</span></span><br><span class="line">        <span class="attribute">visible</span>: enabled</span><br><span class="line">        <span class="attribute">smooth</span>: <span class="literal">true</span></span><br><span class="line">        <span class="attribute">antialiasing</span>: <span class="literal">true</span></span><br><span class="line">        <span class="attribute">gradient</span>: <span class="title">Gradient</span> &#123;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: <span class="number">0.0</span>; <span class="attribute">color</span>: frontColor &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> ; <span class="attribute">color</span>: frontColor &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: percent / <span class="number">100</span> + <span class="number">0.001</span>; <span class="attribute">color</span>: backgroundColor &#125;</span><br><span class="line">            <span class="title">GradientStop</span> &#123; <span class="attribute">position</span>: <span class="number">1.0</span>; <span class="attribute">color</span>: backgroundColor &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>最后，来个合影</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">Item</span> &#123;</span><br><span class="line">    <span class="attribute">id</span>: r</span><br><span class="line">    anchors.fill: parent</span><br><span class="line">    Grid &#123;</span><br><span class="line">        id: g</span><br><span class="line">        anchors.fill: parent</span><br><span class="line">        anchors.margins: <span class="number">10</span></span><br><span class="line">        columns: <span class="number">2</span></span><br><span class="line">        spacing: <span class="number">10</span></span><br><span class="line">        Column &#123;</span><br><span class="line">            width: g.width / <span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            height: g.height /<span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            spacing: <span class="number">10</span></span><br><span class="line">            TNormalProgress &#123;</span><br><span class="line">                width: parent.width</span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                NumberAnimation on percent &#123; from: <span class="number">0</span>; <span class="attribute">to</span>: <span class="number">100</span>; <span class="attribute">duration</span>: <span class="number">5000</span>; <span class="attribute">running</span>: true; <span class="attribute">loops</span>: Animation.Infinite&#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TNormalProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: parent.width</span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                flicker: true</span><br><span class="line">                percent: <span class="number">50</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TNormalProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: parent.width</span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">                percent: <span class="number">70</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TNormalProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: parent.width</span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">                percent: <span class="number">100</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TNormalProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: parent.width</span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.NoBar</span><br><span class="line">                percent: <span class="number">50</span></span><br><span class="line">                gradientIndex: <span class="number">12</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">Row</span> &#123;</span><br><span class="line">            <span class="attribute">width</span>: g.width / <span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            height: g.height /<span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            spacing: <span class="number">10</span></span><br><span class="line"></span><br><span class="line">            TCircleProgress &#123;</span><br><span class="line">                width: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                NumberAnimation on percent &#123; from: <span class="number">0</span>; <span class="attribute">to</span>: <span class="number">100</span>; <span class="attribute">duration</span>: <span class="number">5000</span>; <span class="attribute">running</span>: true; <span class="attribute">loops</span>: Animation.Infinite&#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TCircleProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">                percent: <span class="number">75</span></span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TCircleProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">                percent: <span class="number">100</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">        <span class="selector-tag">Row</span> &#123;</span><br><span class="line">            <span class="attribute">width</span>: g.width / <span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            height: g.height /<span class="number">2</span> - <span class="number">10</span></span><br><span class="line">            spacing: <span class="number">10</span></span><br><span class="line"></span><br><span class="line">            TCircleProgress &#123;</span><br><span class="line">                width: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                text: <span class="built_in">String</span>(<span class="string">"%1天"</span>).<span class="built_in">arg</span>(percent)</span><br><span class="line">                NumberAnimation on percent &#123; from: <span class="number">0</span>; <span class="attribute">to</span>: <span class="number">100</span>; <span class="attribute">duration</span>: <span class="number">5000</span>; <span class="attribute">running</span>: true; <span class="attribute">loops</span>: Animation.Infinite&#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TCircleProgress</span> &#123;</span><br><span class="line">                <span class="attribute">id</span>: ppppp</span><br><span class="line">                width: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                barType: TNormalProgress.BarType.SucceedOrFailed</span><br><span class="line">                SequentialAnimation &#123;</span><br><span class="line">                    running: true</span><br><span class="line">                    loops: Animation.Infinite</span><br><span class="line">                    NumberAnimation &#123;</span><br><span class="line">                        target: ppppp</span><br><span class="line">                        property: <span class="string">"percent"</span></span><br><span class="line">                        from: <span class="number">0</span></span><br><span class="line">                        to: <span class="number">100</span></span><br><span class="line">                        duration: <span class="number">3000</span></span><br><span class="line">                    &#125;</span><br><span class="line">                    <span class="selector-tag">PauseAnimation</span> &#123;</span><br><span class="line">                        <span class="attribute">duration</span>: <span class="number">500</span></span><br><span class="line">                    &#125;</span><br><span class="line">                &#125;</span><br><span class="line">            &#125;</span><br><span class="line">            <span class="selector-tag">TCircleProgress</span> &#123;</span><br><span class="line">                <span class="attribute">width</span>: <span class="number">120</span></span><br><span class="line">                height: <span class="number">120</span></span><br><span class="line">                backgroundColor: gConfig.reserverColor</span><br><span class="line">                percent: <span class="number">100</span></span><br><span class="line">            &#125;</span><br><span class="line">        &#125;</span><br><span class="line">    &#125;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>效果如下：</p>
<p><img src="/images/Qml6/ProgressBar.gif" alt="预览"></p>

    </div>
    
    <div class="reward" ontouchstart>
    <div class="reward-wrap">赏
        <div class="reward-box">
            
            <span class="reward-type">
                <img class="alipay" src="/img/zhifubao.jpg"><b>支付宝打赏</b>
            </span>
            
            
            <span class="reward-type">
                <img class="wechat" src="/img/weixin.jpg"><b>微信打赏</b>
            </span>
            
        </div>
    </div>
    <p class="reward-tip">
        为众人抱薪者,不可使其冻毙于霜雪
    </p>
</div>
    
    <div class="post-footer">
        <div>
            
            转载声明：
            文章采用<a href="http://creativecommons.org/licenses/by-nc-sa/4.0/" target="_blank">知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议</a>进行许可, 转载请注明出处 © <a href="https://jaredtao.github.io" target="_blank">武威的涛哥</a>
            
            
        </div>
        <div>
            
        </div>
    </div>
</article>
<div class="article-nav prev-next-wrap clearfix">
    
    <a href="/2019/05/18/%E7%8E%A9%E8%BD%ACQt(3)-%E7%94%A8%E5%A5%BDQtCreator/" class="pre-post btn btn-default" title='玩转Qt(3)-用好QtCreator'>
        <i class="fa fa-angle-left fa-fw"></i><span class="hidden-lg">上一篇</span>
        <span class="hidden-xs">
            玩转Qt(3)-用好QtCreator</span>
    </a>
    
    
    <a href="/2019/05/17/%E7%8E%A9%E8%BD%ACQml(5)-Qml%E4%B8%8EC++%E4%BA%A4%E4%BA%92/" class="next-post btn btn-default" title='玩转Qml(5)-Qml与C++交互'>
        <span class="hidden-lg">下一篇</span>
        <span class="hidden-xs">
            玩转Qml(5)-Qml与C++交互</span><i class="fa fa-angle-right fa-fw"></i>
    </a>
    
</div>

<div id="comments">
    

<div id="vcomments" class="valine"></div>

<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="/assets/valine.min.js"></script>

<script>
new Valine({
    av: AV,
    el: '#vcomments',
    appId: 'qegD4552u6FU9HoNDvRsonko-gzGzoHsz',
    appKey: 'eitB2FV5n2qyMHcDM7x6EQpt',
    placeholder: '说点什么吧',
    notify: false,
    verify: true,
    avatar: 'mm',
    meta: 'nick,mail'.split(','),
    pageSize: '10',
    path: window.location.pathname,
    lang: 'zh-CN'.toLowerCase()
})
</script>


</div>


                </main>
                
                    <aside id="article-toc" role="navigation" class="col-md-4">
    <div class="widget">
        <h3 class="title">
            文章目录
        </h3>
        
        <ol class="toc"><li class="toc-item toc-level-2"><a class="toc-link" href="#简介"><span class="toc-text">简介</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#源码"><span class="toc-text">源码</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#先看预览图"><span class="toc-text">先看预览图</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#新的渐变效果"><span class="toc-text">新的渐变效果</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#条形进度条"><span class="toc-text">条形进度条</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#圆形进度条"><span class="toc-text">圆形进度条</span></a></li></ol>
        
    </div>
</aside>
                
            </div>
        </div>
    </section>
    <footer class="main-footer">
    <div class="container">
        <div class="row">
        </div>
    </div>
</footer>
<a id="back-to-top" class="icon-btn hide">
    <i class="fa fa-chevron-up"></i>
</a>
    <div class="copyright">
    <div class="container">
        <div class="row">
            <div class="col-sm-12">
                <div class="busuanzi">
    
    访问量:
    <strong id="busuanzi_value_site_pv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    &nbsp; | &nbsp;
    访客数:
    <strong id="busuanzi_value_site_uv">
        <i class="fa fa-spinner fa-spin"></i>
    </strong>
    
</div>
            </div>
            <div class="col-sm-12">
                <span>Copyright &copy;
                    2019
                    
                </span> |
                <span>
                    Powered by <a href="//hexo.io" class="copyright-links" target="_blank" rel="nofollow">Hexo</a>
                </span> |
                <span>
                    Theme by <a href="//github.com/shenliyang/hexo-theme-snippet.git" class="copyright-links" target="_blank" rel="nofollow">Snippet</a>
                </span>
            </div>
        </div>
    </div>
</div>



<script src="/assets/tagcanvas.min.js?rev=2.9.js"></script>

<script>
var tagOption = {
    textColour: '#444', // 字体颜色
    outlineMethod: 'block', // 选中模式
    outlineColour: '#FFDAB9', // 选中模式的颜色
    interval: 30 || 30, // 动画帧之间的时间间隔，值越大，转动幅度越大
    textHeight: 13,
    outlineRadius: 3,
    freezeActive: true || '', // 选中的标签是否继续滚动
    frontSelect: true || '', // 不选标签云后部的标签
    initial: [0.1, -0.1],
    depth: 0.5,
    decel: 0.95,
    maxSpeed: 0.03,
    reverse: true || '', // 是否反向触发
    fadeIn: 500, // 进入动画时间
    wheelZoom: false || '' // 是否启用鼠标滚轮
}
TagCanvas.Start('tag-cloud-3d', '', tagOption);
</script>


<script async src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>


<script src="/js/app.js?rev=@@hash.js"></script>

</body>
</html>